/**
* Created by tanyichao on 2017/3/17.
*/
<template>
    <div class="page_container routerContent" id="xstorepage">
        <nav>
            <span></span>
            <span>门店详情</span>
            <span></span>
        </nav>
        <scroller v-model="commentStatus" lock-x scrollbar-y ref="scroller1" use-pullup @on-pullup-loading="loadMore" :pullup-config="upobj" height="94%">
            <div class="storeDetail">
                <div class="storeHead">
                    <img :src="ststoreInfo.stStoreImg | urlFilterAddServer" alt="" class="stHeadImg">
                    <div class="stRight">
                        <div class="name">
                            <div>门店</div>
                            <div>..</div>
                            <div>{{ststoreInfo.stStoreName}}</div>
                        </div>
                        <p class="stDesc">
                            {{ststoreInfo.stStoreIntroduction}}
                        </p>
                        <a :href="stStorePhone" v-on:click.stop class="stTel">联系商家</a>
                    </div>
                    <div class="posAdd"><span>门店地址：</span>{{ststoreInfo.stStoreAddress}}</div>
                </div>
                <div class="overview">
                    <div class="xslist">
                        <span class="xstar">门店综合评分</span>
                        <div class="star star-36">
                            <span v-for="i in 5">
                            <span v-if="ststoreInfo.comprehensiveStar>(i-1)&&ststoreInfo.comprehensiveStar<(i-0.5)" class="star-item star1"></span>
                            <span v-else-if="ststoreInfo.comprehensiveStar>=(i-0.5)&&ststoreInfo.comprehensiveStar<i" class="star-item star3"></span>
                            <span v-else class="star-item" :class="{'re_yellow_star':(ststoreInfo.comprehensiveStar >= i),'m_star':(ststoreInfo.comprehensiveStar >= i)}"></span>
                        </span>
                        </div>
                        <span class="xstarnum">{{ststoreInfo.comprehensiveStar == "" ? '暂无评' : ststoreInfo.comprehensiveStar}}分</span>
                    </div>
                    <!--<div class="overview-left">-->
                        <!--<h1 class="score">{{ststoreInfo.comprehensiveStar == "" ? 0 : ststoreInfo.comprehensiveStar}}</h1>-->
                        <!--<div class="title">综合评分</div>-->
                        <!--<div class="rank"></div>-->
                    <!--</div>-->
                    <!--<div class="overview-right">-->
                        <!--<div class="score-wrapper">-->
                            <!--<span class="title">服务态度</span>-->
                            <!--<div class="star star-36">-->
                                <!--<span v-for="i in 5">-->
                                    <!--<span v-if="ststoreInfo.serviceStar>(i-1)&&ststoreInfo.serviceStar<(i-0.5)" class="star-item star1"></span>-->
                                    <!--<span v-else-if="ststoreInfo.serviceStar>=(i-0.5)&&ststoreInfo.serviceStar<i" class="star-item star3"></span>-->
                                    <!--<span v-else class="star-item" :class="{'re_yellow_star':(ststoreInfo.serviceStar >= i),'m_star':(ststoreInfo.serviceStar >= i)}"></span>-->
                                <!--</span>-->
                            <!--</div>-->
                            <!--<span class="score">{{ststoreInfo.serviceStar == "" ? 0 : ststoreInfo.serviceStar}}</span>-->
                        <!--</div>-->
                        <!--<div class="score-wrapper">-->
                            <!--<span class="title">商品评分</span>-->
                            <!--<div class="star star-36">-->
                                <!--<span v-for="i in 5">-->
                                    <!--<span v-if="ststoreInfo.goodsStar>(i-1)&&ststoreInfo.goodsStar<(i-0.5)" class="star-item star1"></span>-->
                                    <!--<span v-else-if="ststoreInfo.goodsStar>=(i-0.5)&&ststoreInfo.goodsStar<i" class="star-item star3"></span>-->
                                    <!--<span v-else class="star-item" :class="{'re_yellow_star':(ststoreInfo.goodsStar >= i),'m_star':(ststoreInfo.goodsStar >= i)}"></span>-->
                                <!--</span>-->
                            <!--</div>-->
                            <!--<span class="score">{{ststoreInfo.goodsStar == "" ? 0 : ststoreInfo.goodsStar}}</span>-->
                        <!--</div>-->
                        <!--<div class="delivery-wrapper">-->
                            <!--<span class="title">平均烹饪时长</span>-->
                            <!--<span class="delivery">{{ststoreInfo.orderAverageTime == "" ? "无" : ststoreInfo.orderAverageTime}}</span>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>

                <div class="ratingselect">
                    <div class="rating-type border-1px" style="display: none">
                        <span class="block positive active">全部<span class="count">24</span></span>
                        <span class="block positive">满意<span class="count">18</span></span>
                        <span class="block negative">不满意<span class="count">6</span></span>active: isActive, 'text-danger': hasError
                    </div>
                    <div class="switch on">
                        <span class="icon-check_circle" @click="checkitFn(1)" :class="{'icon-check_circle': checkit ,'icon-nocheck_circle': !checkit}"></span>
                        <span @click="checkitFn(1)" class="text">只看有内容的评价</span>
                    </div>
                </div>

                <div class="rating-wrapper">
                    <div v-if="nodata" style="height:100px; line-height:100px; text-align: center; color:#999">暂无评论</div>
                    <ul>
                        <li class="rating-item" v-for="item in commentInfo">
                            <div class="avatar">
                                <img width="28" height="28"
                                     :src="item.headImgUrl | urlFilterAddServer">
                            </div>
                            <div class="content">
                                <h1 class="name">{{item.name}}</h1>
                                <div class="star-wrapper">
                                    <div class="star star-24">
                                        <span v-for="i in 5">
                                            <span v-if="item.evaluationScore>(i-1)" class="star-item on re_yellow_star"></span>
                                            <span v-else class="star-item on m_star"></span>
                                        </span>
                                    </div>
                                    <span class="delivery">{{item.evaluationScore}}</span>
                                </div>
                                <p class="text">{{item.content}}</p>
                                <div class="time">{{item.date}}</div>
                            </div>
                        </li>
                    </ul>
                    <div v-if="under_line" class="under_line">我也是有底线的</div>
                </div>
            </div>
        </scroller>
    </div>

</template>

<style lang="less" rel="stylesheet/less">
    #xstorepage {
        background: #fff;
        nav {
            font-size: .75rem;
            color: #fff;
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            background: #fc8672;
            span {
                width: 32%;
                display: inline-block;
                text-align: center;
            }
            span:first-child {
                background: url(../assets/img/icon_back.png) no-repeat .5rem center;
                background-size: .8rem 1rem;
                text-align: left;
                padding-left: 1.5rem;
            }
            span:nth-child(3) {
                text-align: right;
                background: url(../assets/img/icon_triangle.png) no-repeat 90% 55%;
                padding-right: 1.4rem;
                background-size: .5rem .375rem;
            }
        }
        .storeDetail {
            width: 100%;
            background: #f6f6f6;
            .stHeadImg {
                position: absolute;
                width: 4rem;
                height: 4rem;
                left: .9rem;
                top: 1rem;
            }
            .storeHead {
                width: 100%;
                overflow: hidden;
                background: #fff;
                padding-left: 6rem;
                position: relative;
                height: 7.65rem;
            }
            .stRight {
                width: 100%;
                height: 100%;
                padding: 1rem .5rem 1rem 0;
                .name {
                    div:nth-child(1) {
                        color: #fff;
                        width: 1.8rem;
                        text-align: center;
                        height: 1rem;
                        line-height: 1rem;
                        font-size: .5rem;
                        background: #fa5a4c;
                        display: inline-block;
                        float: left;
                    }
                    div:nth-child(2){
                        font-size: .5rem;
                        color: #fff;
                        display:table-cell;
                        vertical-align:middle;
                    }
                    div:nth-child(3){
                        font-size: .85rem;
                        margin-left: 1rem;
                        display: table-cell;
                        vertical-align: middle;
                        height: 1rem;
                        line-height: 1rem;
                    }
                }
                .stDesc {
                    width: 12rem;
                    font-size: .6rem;
                    padding-left: 1rem;
                    margin-top: 0.5rem;
                    background: url(../assets/img/icon_present.png) no-repeat left top;
                    background-size: .75rem .75rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    word-break: break-word;
                }
                .stTel {
                    width: 5rem;
                    height: 1.4rem;
                    line-height: 1.4rem;
                    text-align: center;
                    display: inline-block;
                    text-decoration: none;
                    color: #fff;
                    font-size: .6rem;
                    border-radius: .3rem;
                    padding-left: .7rem;
                    background: #fa5a4c url(../assets/img/icon_tel.png) no-repeat .5rem center;
                    background-size: .75rem .75rem;
                    margin-top: .5rem;
                    float: right;
                }
            }
            .posAdd {
                background-color: #fff;
                padding: 0 10px 15px;
                font-size: 0.6rem;
                position: absolute;
                bottom: -6px;
                left: 0.2rem;
                span {
                    background: url(../assets/img/icon_place.png) no-repeat .2rem center;
                    background-size: .65rem 0.7rem;
                    padding-left: 1rem;

                }
            }
        }

        .overview {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 8px 0;
            margin-top: 10px;
            background-color: #fff;
            .xslist{
                font-size: 15px;
                padding-left:18px;
                overflow: hidden;
                .xstar{
                    float: left;
                    margin-top: -2px;
                }
                .xstarnum{
                    float: left;
                    color: #EF9300;
                    margin-top: -2px;
                }
                .star{
                    float: left;
                    display: inline-block;
                    vertical-align: top;
                    margin-left: 6px;
                    .star-item {
                        background: url(../assets/img/m_star.png) no-repeat center center;
                        width: 15px;
                        height: 15px;
                        margin-right: 6px;
                        background-size: 15px 15px;
                        display: inline-block;
                    }
                    .star-item.star1{
                        background: url(../assets/img/star1.png) no-repeat center center;
                        background-size: 15px 15px;
                    }
                    .star-item.star3{
                        background: url(../assets/img/star3.png) no-repeat center center;
                        background-size: 15px 15px;
                    }
                    .m_star{
                        background: url(../assets/img/m_star.png) no-repeat center center;
                        background-size: 15px 15px;
                    }
                    .re_yellow_star{
                        background: url(../assets/img/re_yellow_star.png) no-repeat center center;
                        background-size: 15px 15px;
                    }
                }

            }
            .overview-left {
                padding-top: 26px;
                width: 40%;
                text-align: center;
                position: relative;
                .score {
                    margin-bottom: 6px;
                    line-height: 28px;
                    font-size: 24px;
                    color: #fc8672;
                }
                .title {
                    margin-bottom: 8px;
                    line-height: 12px;
                    font-size: 12px;
                    color: #666;
                }
                .rank {
                    background: url(../assets/img/m_fe.png) no-repeat center center;
                    background-size: 80%;
                    display: block;
                    height: 6rem;
                    position: absolute;
                    top: 50%;
                    margin-top: -3rem;
                    right: 0;
                    left: 0;
                }
            }
            .overview-right {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                padding: 6px 0;
                .score-wrapper {
                    margin-bottom: 8px;
                    font-size: 0;
                    .title {
                        display: inline-block;
                        line-height: 18px;
                        vertical-align: top;
                        font-size: 12px;
                        color: #07111b;
                    }
                    .star {
                        display: inline-block;
                        vertical-align: top;
                        margin-left: 6px;
                        .star-item {
                            background: url(../assets/img/m_star.png) no-repeat center center;
                            width: 15px;
                            height: 15px;
                            margin-right: 6px;
                            background-size: 15px 15px;
                            display: inline-block;
                        }
                        .star-item.star1{
                            background: url(../assets/img/star1.png) no-repeat center center;
                            background-size: 15px 15px;
                        }
                        .star-item.star3{
                            background: url(../assets/img/star3.png) no-repeat center center;
                            background-size: 15px 15px;
                        }
                        .m_star{
                            background: url(../assets/img/m_star.png) no-repeat center center;
                            background-size: 15px 15px;
                        }
                        .re_yellow_star{
                            background: url(../assets/img/re_yellow_star.png) no-repeat center center;
                            background-size: 15px 15px;
                        }
                    }
                    .score {
                        display: inline-block;
                        line-height: 18px;
                        vertical-align: top;
                        font-size: 12px;
                        color: #f90;
                    }
                }
                .delivery-wrapper {
                    font-size: 0;
                    .title {
                        line-height: 18px;
                        font-size: 12px;
                        color: #07111b;
                    }
                    .delivery {
                        margin-left: 12px;
                        font-size: 12px;
                        color: #93999f;
                    }
                }
            }
        }

        .ratingselect {
            background: #fff;

            .rating-type {
                padding: 18px 0 0;
                margin: 0 18px;
                position: relative;
                font-size: 0;
                .block {
                    display: inline-block;
                    padding: 8px 12px;
                    margin-right: 8px;
                    line-height: 16px;
                    border-radius: 1px;
                    font-size: 12px;
                    color: #4d555d;
                    background: #fd8672;
                    .count {
                        margin-left: 2px;
                        font-size: 8px;
                    }
                }
                .block.positive.active {
                    background: #fa5a4c;
                }
                .block.active {
                    color: #fff;
                }
            }
            .switch {
                padding: 0 18px;
                line-height: 24px;
                color: #93999f;
                font-size: 0;
                .icon-check_circle {
                    background: url(../assets/img/me_check.png) no-repeat center center;
                    background-size: 95%;
                    display: inline-block;
                    height: 18px;
                    width: 18px;
                    margin: 3px 3px 0 0;
                }
                .icon-nocheck_circle {
                    background: url(../assets/img/me_nocheck.png) no-repeat center center;
                    background-size: 95%;
                    display: inline-block;
                    height: 18px;
                    width: 18px;
                    margin: 3px 3px 0 0;
                }
                .text {
                    display: inline-block;
                    vertical-align: top;
                    font-size: 12px;
                }
            }
        }

        .rating-wrapper {
            background: #fff;
            ul{
                padding: 0 18px;
                .rating-item {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                padding: 18px 0;
                position: relative;
                .avatar {
                    -webkit-box-flex: 0;
                    -ms-flex: 0 0 28px;
                    flex: 0 0 28px;
                    width: 28px;
                    margin-right: 12px;
                    img {
                        border-radius: 50%;
                    }
                }
                .content {
                    position: relative;
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    .name {
                        margin-bottom: 4px;
                        line-height: 12px;
                        font-size: 10px;
                        color: #07111b;
                    }
                    .star-wrapper {
                        margin-bottom: 6px;
                        font-size: 0;
                        .star {
                            display: inline-block;
                            margin-right: 6px;
                            vertical-align: top;
                            font-size: 0;
                            .star-item.on {
                                background: url(../assets/img/m_star.png) no-repeat center center;
                                width: 10px;
                                height: 10px;
                                margin-right: 3px;
                                background-size: 10px 10px;
                                display: inline-block;
                                background-repeat: no-repeat;
                            }
                            .star-item.on.m_star{
                                background: url(../assets/img/m_star.png) no-repeat center center;
                                width: 10px;
                                height: 10px;
                                background-size: 10px 10px;
                            }
                            .star-item.on.re_yellow_star{
                                background: url(../assets/img/re_yellow_star.png) no-repeat center center;
                                width: 10px;
                                height: 10px;
                                background-size: 10px 10px;
                            }
                        }
                        .delivery {
                            display: inline-block;
                            vertical-align: top;
                            line-height: 12px;
                            font-size: 10px;
                            color: #93999f;
                        }
                    }
                    .text {
                        margin-bottom: 8px;
                        line-height: 18px;
                        color: #07111b;
                        font-size: 12px;
                    }
                    .time {
                        position: absolute;
                        top: 0;
                        right: 0;
                        line-height: 12px;
                        font-size: 10px;
                        color: #93999f;
                    }
                }
            }
                .rating-item:nth-child(1){
                    padding-top:8px ;
                }

            }
        }

        .under_line{
            color: #999;
            font-size: .6rem;
            background-color: #dfdfdf;
            text-align: center;
            padding: 8px;
            overflow: hidden;
        }
    }

</style>

<script>
    import {XHeader, Rater, Scroller, XSwitch, Group} from 'vux'
    import {evaluationsService,commentlistService} from '../services/index'

    export default {
        components: {
            XHeader,
            Rater,
            Scroller,
            XSwitch,
            Group
        },
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller1.reset()
                console.log(this.$refs)
            })
        },
        data(){
            return {
                stStoreId:"",
                ststoreInfo:"",
                stStorePhone:"",
                checkit:false,
                isCont:0,
                commentInfo:[],
                upobj: {
                    content: '',
                    downContent: '松开进行加载',
                    upContent: '上拉加载更多',
                    loadingContent: '加载中...'
                },
                commentStatus: {
                    pullupStatus: 'default'
                },
                nodata:false,
                _i: 1,
                under_line:false,
            }
        },

        methods: {
            checkitFn(i){
                if(i == 1){
                    this.commentInfo = [];
                    this._i = 1;
                    this.checkit = !this.checkit;
                }
                if(this.checkit){
                    this.isCont = 1;
                }else {
                    this.isCont = 0;
                }
                let page_no = i >1 ? i : 1;
                let param = {
                    stStoreId:this.ststoreInfo.stStoreId,
                    isContent:this.isCont,
                    pageNo:page_no,
                };
                commentlistService().save(param).then((res)=> {
                    let dataobj = res.body;
                    if (dataobj && dataobj.code == 200) {
                        dataobj.data.forEach((el,i)=>{
                            if(el.isAnonymous == 1){
                                el.name = el.name.charAt(0) + "***" + el.name.charAt(el.name.length - 1)
                            }
                            this.commentInfo.push(el);
                        })
                        if(dataobj.data.length == 0){
                            this.nodata = true;
                            this.commentStatus.pullupStatus = 'disabled';
                        }else{

                            this.nodata = false;
                            this.noHistoryList = false;
                            if(dataobj.lastPage){
                                this.commentStatus.pullupStatus = 'disabled';
                                this.under_line = true;
                            }else{
                                this.commentStatus.pullupStatus = 'enabled';

                            }
                        }

                    }else{
                        this.nodata = true;
                        this.commentStatus.pullupStatus = 'disabled';
                    }
                })
            },
            loadMore(){
                let  i = 1;
                this.under_line = false;
                i += this._i++;
                console.log(i);
                this. checkitFn(i);
                setTimeout(() => {
                    this.$refs.scroller1.donePullup()
                }, 10)
            },
        },

        mounted(){

        },
        activated(){
            this._i = 1;
            this.under_line = false;
            this.commentInfo = [];
            this.$nextTick(() => {
                this.stStoreId = this.$route.query.stStoreId;
                evaluationsService().save({stStoreId:this.stStoreId}).then((res)=> {
                    let dataobj = res.body;
                    if (dataobj && dataobj.code == 200) {
                        this.ststoreInfo = dataobj.data;
                        this.stStorePhone = "tel:" + dataobj.data.stStorePhone;
                        let param = {
                            stStoreId:this.ststoreInfo.stStoreId,
                            isContent:this.isCont,
                            pageNo:this._i,
                        }
                        commentlistService().save(param).then((res)=> {
                            let dataobj = res.body;
                            if (dataobj && dataobj.code == 200) {
                                dataobj.data.forEach((el, i) => {
                                    if (el.isAnonymous == 1) {
                                        el.name = el.name.charAt(0) + "***" + el.name.charAt(el.name.length - 1)
                                    }
                                    this.commentInfo.push(el);
                                })
                                if (dataobj.data.length == 0) {
                                    this.nodata = true;
                                    this.commentStatus.pullupStatus = 'disabled';
                                } else {
                                    this.nodata = false;
                                    this.noHistoryList = false;
                                    if (dataobj.lastPage) {
                                        this.commentStatus.pullupStatus = 'disabled';
                                    } else {
                                        this.commentStatus.pullupStatus = 'enabled';
                                    }
                                }

                            } else {
                                this.nodata = true;
                                this.commentStatus.pullupStatus = 'disabled';
                            }
                        })
                    }
                })
            })
        },
        watch: {
        },
        created(){

        },
        computed: {
        },


    }
</script>

